<template>
  <el-dialog
    v-model="isChartTable"
    title="临床流程CRF一览表"
    width="1200"
    top="50px"
    class="chart-table-dialog"
  >
    <avue-crud ref="crud" :option="option" :data="data" :table-loading="loading">
      <template #menu-left>
        <span style="font-size: 16px;">第一行是阶段，-表示该阶段没有该量表，√表示该阶段有该量表，
          <span style="color: red;">√</span>表示该量表需要患者填写，
          <span style="color: #30d530;">√</span>表示该量表需要医生填写。
        </span>
      </template>
      <template
        v-for="item in option.column.filter(c => c.prop !== 'crfName')"
        :key="item.prop"
        #[item.prop]="{ row, index }"
      >
        <div class="custom-cell" style="font-size: 22px;" :style="row[item.prop] == '3' ? 'color: red;' : (row[item.prop] == '4' ? 'color: #30d530;' : '')">
          <span>{{ ['-','√','','√','√'][row[item.prop]] }}</span>
          <!-- <el-tag v-if="row[item.prop] === '1'" type="success">完成</el-tag>
          <el-tag v-else type="danger">未完成</el-tag> -->
        </div>
      </template>
    </avue-crud>
  </el-dialog>
</template>
<script setup>
import { crfOverviewOfGroup } from '@/api/group/group';
import { ref, reactive, computed, onMounted, defineEmits, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const emit = defineEmits();
const routerQuery = ref({});
routerQuery.value = route.query;
const router = useRouter();
const store = useStore();

let isChartTable = ref(false);
let sendOpenVal = ref({});

let option = ref({
  menu: false,
  addBtn: false,
  delBtn: false,
  editBtn: false,
  viewBtn: false,
  menuAlign: 'center',
  align: 'center',
  height: '710',
  refreshBtn: false,
  gridBtn: false,
  columnBtn: false,
  border: true,
  column: [],
});
let loading = ref(false);
let data = ref([]);
let crud = ref(null);
const open = val => {
  sendOpenVal.value = val;
  isChartTable.value = true;
  loading.value = true;
  initCrfOverviewOfGroup(val);
};
const initCrfOverviewOfGroup = val => {
  option.value.column = [
    {
      label: '',
      prop: 'crfName',
    },
  ];
  data.value = [];
  crfOverviewOfGroup(val.id).then(res => {
    console.log(res.data.data);
    const DATA = res.data.data;
    DATA.phaseName.forEach((item, index) => {
      option.value.column.push({
        label: item,
        prop: item,
        slot: true,
      });
    });
    const crfEntries = Object.entries(DATA.crfOverview);
    data.value = crfEntries.map(([crfName, values]) => {
      console.log(crfName,values);
      const row = { crfName };
      DATA.phaseName.forEach((phase, index) => {
        row[phase] = values[index] || 'N/A'; // 处理可能的值缺失
      });
      return row;
    });
    loading.value = false;
    console.log(data.value);
  });
};
defineExpose({
  open,
});
</script>
<style scoped lang="scss">
.chart-table-dialog {
  ::v-deep .avue-crud__header {
    display: none;
  }
}
</style>